<template>
  <div id="Project" class="shadow-box">
    <!-- 头部搜索框 -->
    <div class="filter">
      <el-form ref="queryForm" :model="query" inline label-width="80px">
        <el-form-item label="搜索方式">
          <el-select v-model="query.query_type" @change="searchTypeChange">
            <el-option v-for="(item, index) in query.query_items" :key="index" :value="item.value" :label="item.txt"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="搜索字段" v-show="query.query_type != null">
          <el-input v-model="query.query_txt"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="queryCompany_">查找</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="addCompany_btn_fun">添加公司</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 人员列表 -->
    <div class="list">
      <div class="title">公司列表</div>
      <div class="table">
        <el-table :data="company_table" border stripe>
          <el-table-column label="公司名称" prop="companyName"></el-table-column>
          <el-table-column label="负责人" prop="leader"></el-table-column>
          <el-table-column label="联系电话" prop="phone"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="描述" prop="remark"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="warning" @click="setCompany_btn_fun(scope.row)">修改</el-button>
              <el-button type="danger" @click="delCompany_btn_fun(scope.row)">解除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="queryCompany_"
          @current-change="queryCompany_"
          :current-page.sync="page.page_now"
          :page-size="page.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="page.totalSize"
          background
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog title="新增公司" :visible.sync="visible.add" width="50%" :before-close="add_dialog_exit_fun">
      <section class="campany_form_box">
        <CompanyForm ref="addCompanyFormRef" :fromData="companyFormData.add"></CompanyForm>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="add_dialog_exit_fun">取 消</el-button>
        <el-button type="primary" @click="addCompany_">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改公司信息" :visible.sync="visible.set" :before-close="set_dialog_exit_fun" width="50%">
      <section class="campany_form_box">
        <CompanyForm ref="setCompanyFormRef" :fromData="companyFormData.set"></CompanyForm>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="set_dialog_exit_fun">取 消</el-button>
        <el-button type="primary" @click="setCompany_">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="visible.del" width="30%">
      <span>您确定解除该公司吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible.del = false">取 消</el-button>
        <el-button @click="delCompany_">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { checkPhone, checkEmail } from '../../utils/validate'
import { queryCompany, addCompany, setCompany, delCompany, searchCompany } from '../../api/company/index'
import CompanyForm from '../../components/Monitor/forms/company.vue'
export default {
  name: 'Project',
  data() {
    return {
      // 对话框状态
      visible: {
        add: false,
        set: false,
        del: false,
      },
      //   查询设置
      query: {
        query_type: null,
        query_items: [
          { txt: '公司名称', value: 'companyName' },
          { txt: '负责人', value: 'leader' },
          { txt: '联系电话', value: 'phone' },
          { txt: '邮箱', value: 'email' },
          { txt: '描述', value: 'remark' },
        ],
        query_txt: '',
      },
      //   公司表格
      company_table: [
        {
          name: '',
        },
      ],
      //   分页配置
      page: {
        page_now: 1,
        pageSize: 10,
        totalSize: 0,
      },
      //   表单数据
      companyFormData: {
        add: {
          companyName: '',
          leader: '',
          phone: '',
          email: '',
          remark: '',
        },
        set: {
          companyName: '',
          leader: '',
          phone: '',
          email: '',
          remark: '',
        },
      },
      // 删除缓存
      del_cache: null,
    }
  },
  components: {
    CompanyForm,
  },
  methods: {
    searchTypeChange() {
      // console.log(this.query.query_type)
    },
    // 查询 page_now pageSize
    async queryCompany_() {
      let req = { pageIndex: this.page.page_now, pageSize: this.page.pageSize }
      req[this.query.query_type] = this.query.query_txt
      let res = await queryCompany(req,this.query.query_type)
      if (res.result == 0) {
        this.company_table = res.resultContent.companyList
      }
    },
    // 新增
    addCompany_btn_fun() {
      this.visible.add = true
    },
    async addCompany_() {
      if (this.$refs.addCompanyFormRef.validate()) {
        let res = await addCompany(this.companyFormData.add)
        if (res.result == 0) {
          this.$message.success('添加成功')
          this.add_dialog_exit_fun()
          this.queryCompany_()
        }
      }
    },
    add_dialog_exit_fun() {
      this.$refs.addCompanyFormRef.resetFields()
      this.visible.add = false
    },
    // 修改
    setCompany_btn_fun(row) {
      this.companyFormData.set = row
      this.visible.set = true
    },
    async setCompany_() {
      let res = await setCompany(this.companyFormData.set)
      if (res.result == 0) {
        this.$message.success('修改成功')
        this.set_dialog_exit_fun()
        this.queryCompany_()
      }
    },
    set_dialog_exit_fun() {
      this.$refs.setCompanyFormRef.resetFields()
      this.visible.set = false
    },
    // 删除
    delCompany_btn_fun(row) {
      this.visible.del = true
      this.del_cache = row
    },
    async delCompany_() {
      let id = this.del_cache.id
      let res = await delCompany({ ids: [id] })
      if (res.result == 0) {
        this.$message.success('删除成功')
        this.visible.del = false
        this.queryCompany_()
      }
    },
  },
  mounted() {
    this.queryCompany_()
  },
}
</script>

<style lang="scss" scoped>
#Project {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .filter {
    width: 100%;
    height: 65px;
    overflow: hidden;
    overflow-x: auto;
  }

  .list {
    width: 100%;
    height: calc(100% - 65px);
    overflow: hidden;

    .title {
      width: 100%;
      height: 50px;
      font-size: 24px;
    }

    .table {
      width: 100%;
      height: calc(100% - 100px);
      overflow: hidden;
      overflow-y: auto;
    }

    .pagination {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
.campany_form_box {
  padding: 20px;
  padding-right: 50px;
}
</style>
